<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板编译原理</title>
</head>

<body>
  <p>在Vue.js内部，模板编译是一项特别重要的技术。我们平时使用Vue.js进行开发，会经常使用模板。</p>
  <p>创建HTML的方法有很多种，可以手动写渲染函数来创建，也可以使用JSX来创建，也可以通过模板。</p>
  <p>渲染函数是创建HTML最原始的方法。模板最终会通过编译转换成渲染函数，渲染函数执行后，会得到一份vnode用于虚拟DOM渲染。所以模板编译其实是配合虚拟DOM进行渲染</p>

  <h1>总结：</h1>
  <p>将模版编译成渲染函数有三部分内容：先将模版解析成AST，然后遍历AST标记静态节点，最后使用AST生成代码字符串。</p>
  <p>这三部分分别对应三个模块：解析器，优化器，代码生成器。</p>
</body>

</html>